
import React, { Component, Fragment } from 'react';
import XiaojiejiItem from './XiaojiejiItem'


class Xiaojiejie extends Component {
    constructor(props) {
        super(props)
        this.state = {
            inputValue: "",
            list: ['基础按摩', '精油推背']
        }
    }
    render() {
        return (
            <Fragment>
                {/* 正确注释的写法 */}
                <div>
                    <label htmlFor="jspang">加入服务：</label>
                    <input id="jspang" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
                    <button onClick={this.addList.bind(this)}> 增加服务 </button>
                </div>
                <ul ref={(ul)=>{this.ul=ul}}>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                //----------------关键修改代码 循环的是一个组件。组件也需要key'----start
                                <div >
                                    {/* 组件传递了多个值。可以用propType限制/校验  //ref这里是一个函数通过这种方式获取相应的input标签*/}
                                    <XiaojiejiItem content={item} index={index} list={this.state.list} deleteItem={this.deleteItem.bind(this)} ref={(input)=>{this.input=input}}/>
                                </div>
                                //----------------关键修改代码----end

                            )
                        })
                    }
                </ul>
            </Fragment>
        );
    }
    inputChange(e) {
        // console.log(e.target.value);
        // this.state.inputValue=e.target.value;
        this.setState({
            // inputValue: e.target.value
            // 使用ref绑定dom元素
            inputValue:this.input.value
        })
    
    }
    //增加服务的按钮响应方法
    addList() {
        // setState是一个异步函数没等虚拟Dom渲染，我们的console.log就已经执行
        this.setState({
            list: [...this.state.list, this.state.inputValue],
            inputValue: ''
        },()=>{
            // 这是setstate提供的一个回调函数，解决坑
            console.log(this.ul.querySelectorAll('div').length)
        })
            // bug少一个div
        console.log(this.ul.querySelectorAll('div').length)

    }
    //删除单项服务
    deleteItem(index) {
        let list = this.state.list
        list.splice(index, 1)
        this.setState({
            list: list
        })

    }
}



export default Xiaojiejie;